<template>
	<view>

		<view class="install_item">
			<view style="display: flex;justify-content: space-between;">
				<view>预约时间：{{timestampToDateFormat(item.install_date)}}</view>
				<view style="color: orangered;font-weight: bold;">{{getStatusTxt(item.status)}}</view>
			</view>
			<view>安装型号：{{item.ts}}</view>
			<view>锁体型号：{{item.lock_ts}}</view>
			<view v-if="item.lock_img" style="display: flex;align-items: center;" @click.stop="onCheckImg(item.lock_img)">
				<view>锁体照片：</view>
				<image class="img_lock" :src="item.lock_img"></image>
				<view style="color: deepskyblue;font-weight: bold;">点击查看</view>
			</view>
			<view>客户地址：{{item.address}}</view>
			<view>客户电话：<span @click.stop="onPhone(item)" style="color: deepskyblue;text-decoration: underline;font-weight: bold;">{{item.mobile}} (点击拨打)</span></view>
			<view>客户要求：{{item.remark}}</view>
			<view>赠品：{{item.gift}}</view>
			<!-- <view>销售人员：{{item.salesperson}}</view> -->
			<!-- <view>安装人：</view> -->
			<view v-if="item.status == 4 || item.status == 6" style="font-weight: bold;color: red;">
				拒绝原因：{{item.ye_yj || item.cw_yj}}
			</view>
		</view>

		<view style="margin: 20rpx 0 0 40rpx;font-size: 36rpx;font-weight: bold;">上传照片</view>

		<view class="img_div">
			<image :src="img_url_0 || img_default" @click.stop="onUploadImg(0)"></image>
			<image :src="img_url_1 || img_default" @click.stop="onUploadImg(1)"></image>
			<image :src="img_url_2 || img_default" @click.stop="onUploadImg(2)"></image>
			<image :src="img_url_3 || img_default" @click.stop="onUploadImg(3)"></image>
		</view>

		<view style="display: flex;justify-content: space-evenly;margin: 10rpx 20rpx 20rpx 20rpx;font-size: 28rpx;">
			<view class="txt_item">安装前(内)</view>
			<view class="txt_item">安装前(外)</view>
			<view class="txt_item">安装后(内)</view>
			<view class="txt_item">安装后(外)</view>
		</view>

		<view class="img_div">
			<image :src="img_url_4 || img_default" @click.stop="onUploadImg(4)"></image>
			<image :src="img_url_5 || img_default" @click.stop="onUploadImg(5)"></image>
			<image :src="img_url_6 || img_default" @click.stop="onUploadImg(6)"></image>
			<image :src="img_url_7 || img_default" @click.stop="onUploadImg(7)"></image>
		</view>

		<view style="display: flex;justify-content: space-evenly;margin: 10rpx 20rpx 20rpx 20rpx;font-size: 28rpx;">
			<view class="txt_item">质保图</view>
			<view class="txt_item">赠品图</view>
			<view class="txt_item">核销图</view>
			<view class="txt_item">核销图</view>
		</view>

		<view class="op_btn_div">
			<view v-if="!cannotUploadImg()" class="btn1" @click.stop="onOk">提交安装信息</view>
		</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToYMDHM, getStatusTxt } from '@/util/util.js'
	const uploadImage = require('@/util/oss/upload.js')
	export default {
		data() {
			return {

				item: {}, // 传过来的安装对象

				img_default: '/static/ic_add_img.png',

				img_url_0: '', // 安装前 正面
				img_url_1: '', // 安装前 背面
				img_url_2: '', // 安装后 正面
				img_url_3: '', // 安装后 背面
				img_url_4: '', // 质保卡图
				img_url_5: '', // 赠品图
				img_url_6: '', // 客户微信图
				img_url_7: '', // 核销图
			}
		},

		onLoad(opts) {
			this.item = JSON.parse(opts.detail)
			// console.log('opts = ', JSON.stringify(this.item));

			// 解析传过来的图片地址
			if (this.item) {
				if (this.item.after) {
					this.img_url_0 = this.item.after.split(',')[0]
					this.img_url_1 = this.item.after.split(',')[1]
				}
				if (this.item.before) {
					this.img_url_2 = this.item.before.split(',')[0]
					this.img_url_3 = this.item.before.split(',')[1]
				}
				this.img_url_4 = this.item.zb
				this.img_url_5 = this.item.zp
				this.img_url_6 = this.item.wx
				this.img_url_7 = this.item.hx
			}

		},

		methods: {

			// 拨打电话
			onPhone(item) {
				if (!item || !item.mobile) {
					uni.showToast({ icon: 'none', title: '号码有误!' })
				}
				uni.makePhoneCall({ phoneNumber: `${item.mobile}` })
			},

			// 查看锁体照片
			onCheckImg(url) {
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				});
			},

			// onUploadImg
			onUploadImg(index) {
				if (this.cannotUploadImg()) {
					uni.showToast({ icon: 'none', title: '当前状态不能上传图片!' })
					return
				}
				this.chooseWxImage(index)
			},

			// 微信选择图片或拍照
			chooseWxImage(index) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					// sourceType: [type],
					success(res) {
						console.log('选择的图片路径 = ', res);
						uni.showLoading({ title: '图片上传中...', mask: true })
						uploadImage(res.tempFilePaths[0], 'hhsaz/',
							(res) => {
								uni.hideLoading()
								uni.showToast({ title: '上传成功', icon: 'none' })

								// console.log('index = ', index);
								console.log("上传成功结果 = ", res)

								if (index == 0) that.img_url_0 = res
								if (index == 1) that.img_url_1 = res
								if (index == 2) that.img_url_2 = res
								if (index == 3) that.img_url_3 = res
								if (index == 4) that.img_url_4 = res
								if (index == 5) that.img_url_5 = res
								if (index == 6) that.img_url_6 = res
								if (index == 7) that.img_url_7 = res
							},
							(res) => {
								uni.hideLoading()
								// uni.showToast({ title: '上传失败', icon: 'none' })
								uni.showModal({
									title: '上传失败',
									content: `错误信息：${JSON.stringify(res)}`,
									showCancel: false,
									success: (res) => {
										if (res.confirm) {

										}
									}
								})
							}
						)

					},

					fail(res) {
						uni.showToast({ title: '未获取到图片信息', icon: 'none' })
					}

				})
			},

			onOk() {
				if (this.cannotUploadImg()) {
					uni.showToast({ icon: 'none', title: '当前状态不能提交信息!' })
					return
				}
				if (!this.img_url_0 && !this.img_url_1 && !this.img_url_2 && !this.img_url_3 && !this.img_url_4 && !this.img_url_5 && !this.img_url_6 && !this.img_url_7) {
					uni.showToast({ icon: 'none', title: '请上传安装照片!' })
					return
				}
				uni.showModal({
					title: '提示',
					content: `是否提交安装信息？`,
					success: (res) => {
						if (res.confirm) {
							this.submitInfo()
						} else {
							uni.showToast({ icon: 'none', title: '未提交' })
						}
					}
				})
			},

			// 接口:提交安装信息
			async submitInfo() {
				let that = this

				let token = getUInfo().token
				let prms = {
					id: this.item.id,
					after: `${this.img_url_0},${this.img_url_1}`,
					before: `${this.img_url_2},${this.img_url_3}`,
					zb: this.img_url_4,
					zp: this.img_url_5,
					wx: this.img_url_6,
					hx: this.img_url_7,
				}
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$submitInfo(prms)
				console.log(`submitInfo...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					uni.showModal({
						title: '提示',
						content: '提交成功！',
						showCancel: false,
						success: (res) => {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 是否能上传和提交信息
			cannotUploadImg() {
				// 0 待接单 1 待安装 2 待业务审核 3 待财务审核 4 业务审核拒绝 5 待结算 6 财务审核拒绝 7 已结算
				// 非 1 4 6 状态不能上传照片
				return this.item.status != 1 && this.item.status != 4
			},

			getStatusTxt(status) {
				return getStatusTxt(status)
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},

		}
	}
</script>

<style scoped>
	.install_item {
		display: flex;
		flex-direction: column;
		/* height: 300rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
		/* background-color: rgba(249, 233, 198, 1); */
		/* background-color: rgba(237, 216, 171, 1); */
		/* background-color: rgba(219, 38, 29, 0.3); */
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 16rpx;
		font-size: 30rpx;
		color: black;
	}

	/* 锁体照片 */
	.img_lock {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 20rpx 0 0;
	}

	.img_div {
		display: flex;
		width: calc(100% - 40rpx);
		margin: 20rpx 20rpx 0 20rpx;
	}

	.img_div image {
		width: calc((100% - 106rpx) / 4);
		height: auto;
		min-height: 140rpx;
		aspect-ratio: 1/1;
		border: dashed 1rpx #bbbbbb;
		border-radius: 16rpx;
		margin: 0 0 0 20rpx;
	}

	.txt_item {
		width: calc((100% - 48rpx) / 4);
		font-size: 26rpx;
		text-align: center;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx 0 0 0;
	}

	.btn1 {
		width: 75%;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}
</style>